<template>
  <div>
    <el-dialog title="查看明细" :visible.sync="dialogVisible" width="80%">
      <el-table :data="orderData" border class="orderTable">
        <el-table-column label="订单信息" align="center">
          <el-table-column
            property="trade_no"
            label="订单编号"
            align="center"
          />
          <el-table-column
            property="pay_type"
            label="支付方式"
            align="center"
          />
          <el-table-column label="租期" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.month_total"
                >{{ scope.row.month_total }}期</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="租期金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.rent_total!=0"
                >￥{{ scope.row.rent_total }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="用户已付金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.paid_total_rent!=0"
                >￥{{ scope.row.paid_total_rent }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="is_risk" label="是否风控" align="center" />
          <el-table-column
            property="financing_type"
            label="是否上链融资"
            align="center"
          />
          <el-table-column label="保险费用" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.insure_fee!=0"
                >￥{{ scope.row.insure_fee }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="退款信息" align="center">
          <el-table-column label="退款金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.refund_amount!=0"
                >￥{{ scope.row.refund_amount }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="total_service_fee" label="应付总手续费" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.total_service_fee!=0"
                >￥{{ scope.row.total_service_fee }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="paid_service_fee" label="已付手续费" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.paid_service_fee!=0"
                >￥{{ scope.row.paid_service_fee }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="deduct_service_fee" label="应补足手续费" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_service_fee!=0"
                >￥{{ scope.row.deduct_service_fee }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="deduct_refund_amount" label="应补足退款金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_refund_amount!=0">￥{{ scope.row.deduct_refund_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="需补足总额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_amount!=0" class="red-font bold-font"
                >￥{{ scope.row.deduct_amount }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="centerDiv" @click="clickShow">
        <p>展开查看明细</p>
        <img src="../../../assets/images/pullDown.png" alt="" />
      </div>
      <el-table :data="rateData" border class="rateTable" v-if="isShow"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column label="账单支付明细" align="center">
          <el-table-column label="期数" align="center">
            <template slot-scope="scope">
              <span>第{{ scope.row.which_period }}期</span>
            </template>
          </el-table-column>
          <el-table-column
            property="pay_type"
            label="支付方式"
            align="center"
          />
          <el-table-column
            property="settle_status_name"
            label="结算状态"
            align="center"
          />
          <el-table-column
            property="pay_status"
            label="支付状态"
            align="center"
          />
          <el-table-column label="租期金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.rent!=0">￥{{ scope.row.rent }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="实付金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.rent!=0">￥{{ scope.row.rent }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="手续费率" align="center">
          <el-table-column label="合同" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.smartcontract_amount!=0"
                >￥{{ scope.row.smartcontract_amount }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="实名认证" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.realname_amount!=0"
                >￥{{ scope.row.realname_amount }}</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="代扣" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.withhold_rate!=0"
                >{{ scope.row.withhold_rate }}%</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="存证" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.file_rate!=0">{{ scope.row.file_rate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="平台手续费" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.platform_rate!=0"
                >{{ scope.row.platform_rate }}%</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="保险" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.insure_rate !=0"
                >{{ scope.row.insure_rate }}%</span
              >
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="总费率" align="center" width="120px">
            <template slot-scope="scope">
              <span v-if="scope.row.which_period==1 && scope.row.fixed_amount !=0">￥{{ scope.row.fixed_amount }}+</span>
              <span v-if="scope.row.shop_rate !=0">{{ scope.row.shop_rate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="结算手续费信息" align="center">
          <el-table-column label="结算金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.settle_amount !=0">￥{{ scope.row.settle_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="应付手续费" align="center" property="payable_fee">
            <template slot-scope="scope">
              <span v-if="scope.row.payable_fee !=0">￥{{ scope.row.payable_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="已付手续费" align="center" property="paid_fee">
            <template slot-scope="scope">
              <span v-if="scope.row.paid_fee !=0">￥{{ scope.row.paid_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="退款信息" align="center">
          <el-table-column label="退款金额" align="center" width="120px" property="refund_amount">
            <template slot-scope="scope">
              <span v-if="scope.row.refund_amount !=0">￥{{ scope.row.refund_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="应补足手续费" align="center" width="120px" property="deduct_fee">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_fee !=0" class="red-font bold-font">￥{{ scope.row.deduct_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="应补足退款金额" align="center" width="120px" property="deduct_refund_amount">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_refund_amount!=0" class="red-font bold-font">￥{{ scope.row.deduct_refund_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { orderRefundTransData, orderRefundDetail } from "@/api/orderRefund";
export default {
  props: ["refundId"],
  data() {
    return {
      dialogVisible: false,
      orderData: [],
      rateData: [],
      isShow: false,
      sum: {
        total_deduct_amount: "",
        total_deduct_fee: "",
        total_paid_fee: "",
        total_payable_fee: "",
        total_refund_amount: ""
      },
    };
  },
  methods: {
    clickShow() {
      this.isShow = !this.isShow;
    },
    getData() {
      orderRefundDetail(this.refundId).then((res) => {
        this.sum = res
        this.rateData = [{}];
        for (var i in res) {
          this.$set(this.rateData, i, res[i]);
        }
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        switch(column.property) {
          case "payable_fee":
            sums[index] = this.sum.total_payable_fee!=0 ? '￥'+this.sum.total_payable_fee : '--' ;
            break;
          case "paid_fee":
            sums[index] = this.sum.total_paid_fee!=0 ? '￥'+this.sum.total_paid_fee : '--' ;
            break;
          case "refund_amount":
            sums[index] = this.sum.total_refund_amount!=0 ? '￥'+this.sum.total_refund_amount : '--' ;
            break;
          case "deduct_fee":
            sums[index] = this.sum.total_deduct_fee!=0 ? '￥'+this.sum.total_deduct_fee : '--' ;
            break;
          case "deduct_refund_amount":
            sums[index] = this.sum.total_deduct_amount!=0 ? '￥'+this.sum.total_deduct_amount : '--' ;
            break;
          default:
            break;
        }
        // const values = data.map(item => Number(item[column.property]));
        // if (!values.every(value => isNaN(value))) {
        //   sums[index] = values.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        //   sums[index] = sums[index]!=0 ? '￥'+sums[index].toFixed(4) : '--';
        // } else {
        //   sums[index] = '';
        // }
      });
      return sums;
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.isShow= false;
        orderRefundTransData(this.refundId).then((res) => {
          this.orderData = [{}];
          for (var i in res) {
            this.$set(this.orderData[0], i, res[i]);
          }
        });
        this.getData();
      }
    },
  },
};
</script>

<style lang="scss" scope>
.orderTable {
  margin-top: 20px;
}
.rateTable {
  margin: 30px 0 70px;
}
.centerDiv {
  text-align: center;
  margin: 50px 0 30px;
  cursor: pointer;
  p {
    font-size: 16px;
    color: #2993ff;
    margin-bottom: 15px;
    user-select: none;
  }
  img {
    width: 27px;
    height: 11px;
  }
}
</style>